<template>
  <div class="main" style="">
    <div style="margin: 10px 0 10px 0px">
      <el-input v-model="searchName" placeholder=" 请 输 入 关 键 字 " style="width:30%"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="memberList">查询</el-button>
    </div>
    <el-table :data="tableData"  stripe style="width: 1250px;">
      <el-table-column align="center" prop="id" label="用户id"></el-table-column>
      <el-table-column align="center" sortable prop="username" label="用户名"></el-table-column>
      <el-table-column align="center" prop="password" label="用户密码"></el-table-column>
      <el-table-column align="center" prop="email"  label="用户邮箱"></el-table-column>
      <el-table-column align="center" label="权限设置" width="180">
        <template #default="scope">
          <el-button v-if="scope.row.status === 0" disabled @click="memberStatus(scope.row.id, 0)" type="primary" style="width: 60px;">普通用户</el-button>
          <el-button v-else @click="memberStatus(scope.row.id, 0)" type="primary" style="width: 60px;">普通用户</el-button>
          <el-button v-if="scope.row.status === 1" disabled @click="memberStatus(scope.row.id, 1)" type="primary" style="width: 60px;">管理员</el-button>
          <el-button v-else @click="memberStatus(scope.row.id, 1)" type="primary" style="width: 60px;">管理员</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-popconfirm title="你确定要删除该数据吗？" @confirm="del(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-left: 25%;padding-top: 10px;tab-size: 16px">
      <el-pagination
          small
          background
          layout="prev, pager, next, sizes, total, jumper"
          class="mt-4"
          @size-change="pageSizeChange"
          @current-change="currentChange"
          :total="total"
          :current-page="currentPage"
          :page-sizes="[10,20]"
          :page-size="pageSize"
      />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

export default {
  name: "member",
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      total: 5,
      dialogTableVisible: false,
      searchName: '',
      hireType: [
        {
          id: 0,
          value: '普通会员'
        },
        {
          id: 1,
          value: '管理员'
        },
      ],
      tableData: [{
        id: 1,
        username: 'iphone',
        password: 122,
        email: 2,
        status: 1
      },
        {
          id: 2,
          username: 'iphone',
          password: 122,
          email: 2,
          status: 0
        }]
    }
  },
  created() {
    this.memberList();
  },
  methods: {
    currentChange(pageNum) {
      this.currentPage = pageNum;
      this.memberList();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.memberList();
    },
    memberList(){
      request.get("/api/memberList",{
        params:{
          searchName: this.searchName,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(
          res => {
            if (res.code === '200'){
              this.tableData = res.data.records;
              this.total = res.data.total;
            }
            if (res.code === '555'){
              ElMessage({
                message: '数据拉去失败',
                type: 'warning',
              })
            }
          }
      )
    },
    memberStatus(id, memberStatus){
      request.get("/api/memberStatus", {
        params: {
          memberId: id,
          status: memberStatus
        }
      }).then(
          res => {
            if (res.code === '200'){
              ElMessage({
                message: res.msg,
                type: 'success',
              })
            }
            if (res.code === '555'){
              ElMessage({
                message: "操作失败",
                type: 'error',
              })
            }
            this.memberList();
          }
      )
    },
    del(id){
      request.delete("/api/delMember/" + id).then(
          res => {
            if (res.code === '200'){
              ElMessage({
                message: res.msg,
                type: 'success',
              })
            }
            if (res.code === '555'){
              ElMessage({
                message: "操作失败",
                type: 'error',
              })
            }
            this.memberList();
          }
      )
    },
  }
}
</script>

<style scoped>

</style>